<template>
  <div>
    <h3>歌单评论（{{this.data.length}}）</h3>
    <div style="overflow-y:scroll;height:470px;white-space:nowrap;width: 100%">
      <div id="diss" v-for="o in data" :key="o.index">
        <el-row>
          <div id="avatar">
            <el-avatar :size="40" :src="o.avatarUrl"></el-avatar>
          </div>
          <div style="margin-top: 10px">
            <div>
              <span style="color: #303133;font-size: 20px;">{{o.nickname}}&nbsp;&nbsp;&nbsp;</span>
              <span style="color: #909399">{{o.timeStr}}&nbsp;&nbsp;&nbsp;</span>
              <span style="color: #909399" v-if="o.location!==''">IP：{{o.location}}</span>
            </div>
            <div id="comment-info">
              {{o.content}}
            </div>
          </div>

        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  // import musicApi from '@/musicApi/apis/songs'
  export default {
    name: "comment",
    props: ["data"],
    data() {
      return {
      }
    },
    mounted() {
      //获取歌单热评
      // this.getPersonalizedComments(this.id);
    },
    methods: {
      //获取歌单热评
      /*  async getPersonalizedComments(id){
          await musicApi.getPersonalizedComment(id).then(commentRes=>{
            this.data=commentRes.data.comments;
            let arr=[];
            for(var i=0;i<this.data.length;i++){
              let obj={}
              obj.avatarUrl=this.data[i].user.avatarUrl;
              obj.nickname=this.data[i].user.nickname;
              obj.content=this.data[i].content;
              obj.timeStr=this.data[i].timeStr;
              obj.location=this.data[i].ipLocation.location;
              arr.push(obj)
            }
            this.comments=arr
          })
        }*/
    },

  }
</script>

<style scoped>
  #diss {
    display: flex;
  }

  #avatar {
    display: block;
    margin-right: 20px;
    float: left;
  }

  #comment-info {
    margin-left: 50px;
    width: 100%;
    color: burlywood;
  }
</style>